import React, {Component} from 'react'
import MyHeader from "../components/myheader"
import { Button,InputItem,WhiteSpace,Toast} from 'antd-mobile'

export default class PhoneChange extends Component {
  constructor (props){
   super(props)
   this.state= {
     step:1,
     title: "找回密码",
     phone: "",
     name:"",
     newpw:"",
     newpw2:""
   }
}
 componentDidMount(){
  this.autoFocusInst.focus();
 }

 nextstep(){
   const {name,phone} = this.state;
   if(!name){
    return Toast.fail('用户名不能为空');
   }
   if(!phone){
    return Toast.fail('手机号不能为空');
   }
   this.setState({step:2,title:"设置新密码"})
   this.autoFocusInst.focus();
 }
 goback(){
  this.state.step == 1  ? this.props.history.go(-1) :
  this.setState({step:1,title:"找回密码"})
  this.autoFocusInst.focus();
 }
 submit(){

 }
 changestate2(){
  return  <div>
            <InputItem type="num"
              ref={el => this.autoFocusInst = el}
              placeholder="新登录密码"
              onChange={(newpw)=>{this.setState({newpw})}}
              value={this.state.newpw}
          ></InputItem>
              <WhiteSpace />
             <InputItem type="num"
                placeholder="确认新密码"
                onChange={(newpw2)=>{this.setState({newpw2})}}
                value={this.state.newpw2}
            ></InputItem>

    <Button type="primary" onClick={()=>{this.submit()}} >确认</Button>
    </div>
 }
   render() {
   return <div className="changephone">
      <MyHeader {...this.props} leftaction={()=>this.goback()}>{this.state.title}</MyHeader>

      <div className="basepage">
      {this.state.step==2 ? this.changestate2() :
            (<div>
            <InputItem type="num"
                ref={el => this.autoFocusInst = el}
                placeholder="请输入用户名"
                onChange={(phone)=>{this.setState({phone})}}
                value={this.state.phone}
            ></InputItem>
            <WhiteSpace />
            <InputItem type="num"
                placeholder="请输入您注册时的手机号码"
                onChange={(name)=>{this.setState({name})}}
                value={this.state.name}
            ></InputItem>
            <Button type="primary" onClick={()=>{this.nextstep()}}>提交</Button>
            </div>)
        }
      </div>
   </div>
   }
}